<template>
  <div v-loading="loading">
    <el-popover placement="bottom" width="250" class="serch">
      <div style="margin: 0">
        <el-input style="width: 180px" v-model="sth"></el-input>
        <el-button icon="el-icon-search" @click="search()"></el-button>
      </div>
      <el-button slot="reference" icon="el-icon-search" circle></el-button>
    </el-popover>
    <div class="card-wrap">
      <div class="survey-card-context">
        <el-card :body-style="{ padding: '20px' }" class="exam" shadow="always">
          <div class="biaoti" @click="createExam()">+创建试卷</div>
        </el-card>
      </div>
      <div class="survey-card-context" v-for="(item, index) in tableData">
        <el-card :body-style="{ padding: '20px' }" class="exam" shadow="always">
          <div>
            <div class="time">
              <p class="ziti">{{ item.title }}</p>
              <br />
            </div>
            <div class="bottom clearfix">
              <time class="time"
                ><strong>创建时间:</strong>{{ item.createTime }}</time
              ><br /><br />
              <el-button
                type="text"
                @click="preview(item.id)"
                icon="el-icon-view"
                >预览</el-button
              >
              <el-button
                type="text"
                @click="changepaper(item.id)"
                icon="el-icon-edit"
                >修改</el-button
              >
              <el-button
                type="text"
                @click="deletepaper(item.id, index)"
                icon="el-icon-delete"
                >删除</el-button
              ><br />
              <el-button
                type="text"
                @click="totalpaper(item.id)"
                icon="el-icon-s-data"
                >统计</el-button
              >
              <el-button
                type="text"
                @click="sharePaper(item.id)"
                icon="el-icon-share"
                >分享</el-button
              >
              <el-button
                type="text"
                @click="correct(item.id, item.title)"
                icon="el-icon-check"
                >批改</el-button
              ><br />

              <div v-if="item.status">
                <el-button
                  type="primary"
                  size="mini"
                  @click="releaseStop(item.id, item.status, index)"
                  plain
                  >发布中</el-button
                >
              </div>
              <div v-else>
                <el-button
                  type="info"
                  size="mini"
                  @click="releaseStop(item.id, item.status, index)"
                  plain
                  >已停止</el-button
                >
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      class="weizhi"
      @current-change="page"
    >
    </el-pagination>

    <el-dialog
      title="分享试卷"
      :visible.sync="linkShow"
      :close-on-click-modal="false"
      class="dialog"
    >
      <div class="demo">
        <div class="demo_input" style="width: 50%">
          <el-input :disabled="true" v-model="linkText"></el-input>
        </div>
        <br />
        <div class="demo_button">
          <el-button size="small" type="success" @click="copyUrl" plain
            >复制链接</el-button
          >
          <el-button size="small" type="primary" @click="openUrl(link)" plain
            >打开链接</el-button
          >
        </div>
      </div>

      <!-- <div @click="goLink" style="text-align: center;">
          <el-link type="primary">{{ linkText }}</el-link>
        </div> -->

      <br />
      <div align="center">
        <vue-qr
          :logo-src="logoSrc"
          :size="191"
          :margin="0"
          :logoMargin="3"
          :auto-color="true"
          :dot-scale="1"
          :text="linkText"
        />
      </div>
      <div style="width: 100%; text-align: right">
        <el-button style="margin-left: 10px" @click="linkShow = false"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import VueQr from "vue-qr";
export default {
  components: {
    VueQr,
  },
  data() {
    return {
      loading: true,
      sth: "",
      flag: true,
      value: true,
      pageSize: 7,
      total: 3,
      tableData: null,
      logoSrc: require("@/assets/aa.png"),
      linkShow: false,
      linkText: "",
    };
  },
  methods: {
    createExam() {
      this.$router.push("/creat");
    },
    search() {
      this.flag = false;
      const _this = this;
      let id1 = sessionStorage.getItem("id");
      axios
        .get(
          _this.APIurl.apiUrl.domainName +
            "examPaper/findByTitleLike/" +
            _this.sth +
            "/" +
            id1 +
            "/1/" +
            this.pageSize
        )
        .then(function (resp) {
          console.log(resp);
          _this.tableData = resp.data.data.content;
          _this.total = resp.data.data.totalElements;
        });
    },
    // 点击开启开关
    // 点击开启开关
    releaseStop(id, status, index) {
      var tishi = "";
      if (status != null && status) {
        tishi = "停止";
      } else {
        tishi = "发布";
      }
      const _this = this;
      this.$confirm("此操作将" + tishi + "试卷, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios
            .put(
              _this.APIurl.apiUrl.domainName + "examPaper/releaseOrStop/" + id
            )
            .then(function (resp) {
              if (status == null) {
                _this.tableData[index].status = true;
              } else {
                _this.tableData[index].status = !status;
              }
            });

          this.$message({
            type: "success",
            message: "成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 复制链接
    copyUrl() {
      const input = document.createElement("input");
      document.body.appendChild(input);
      input.setAttribute("value", this.linkText);
      input.select();
      if (document.execCommand("copy")) {
        document.execCommand("copy");
      }
      document.body.removeChild(input);
      this.$message({
        message: "已复制到剪切板",
        type: "success",
      });
    },
    // 新标签页打开链接
    openUrl(url) {
      window.open(this.linkText, "_blank");
    },

    changepaper(id) {
      const _this=this;
      axios
        .get(_this.APIurl.apiUrl.domainName + "examPaper/wantModify/" + id)
        .then(function (response) {
          if (response.data.code == 0) {
            _this.$message({
              message: "考试已开始不可修改",
              duration: 2000,
              type: "error",
            });
          } else {
            _this.$router.push({
              path: "/creat",
              query: {
                id: id,
              },
            });
          }
        });
    },
    deletepaper(id, index) {
      const _this = this;
      this.$confirm("此操作将永久删除该试卷, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios
            .delete(
              _this.APIurl.apiUrl.domainName + "examPaper/deleteById/" + id
            )
            .then(function (resp) {
              _this.tableData.splice(index, 1);
            });

          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    preview(id) {
      this.$router.push({
        path: "/preview",
        query: {
          id: id,
        },
      });
    },
    totalpaper(id) {
      this.$router.push({
        path: "/dataShow",
        query: {
          id: id,
        },
      });
    },

    sharePaper(id) {
      this.linkShow = true;
      this.linkText = " http://localhost:8080/answer/" + id;
    },
    correct(id, title) {
      this.$router.push({
        path: "/checkAnswers",
        query: {
          id: id,
          title: title,
        },
      });
    },
    page(currentPage) {
      const _this = this;
      let id2 = sessionStorage.getItem("id");
      if (this.flag) {
        axios
          .get(
            _this.APIurl.apiUrl.domainName +
              "examPaper/findAllByUserId/" +
              id2 +
              "/" +
              currentPage +
              "/" +
              this.pageSize
          )
          .then(function (resp) {
            console.log(resp);
            _this.tableData = resp.data.data.content;
            _this.total = resp.data.data.totalElements;
          });
      } else {
        axios
          .get(
            _this.APIurl.apiUrl.domainName +
              "examPaper/findByTitleLike/" +
              _this.sth +
              "/" +
              id2 +
              "/" +
              currentPage +
              "/" +
              this.pageSize
          )
          .then(function (resp) {
            console.log(resp);
            _this.tableData = resp.data.data.content;
            _this.total = resp.data.data.totalElements;
          });
      }
    },
  },
  created() {
    const _this = this;
    let id1 = sessionStorage.getItem("id");
    axios
      .get(
        _this.APIurl.apiUrl.domainName +
          "examPaper/findAllByUserId/" +
          id1 +
          "/1/" +
          this.pageSize
      )
      .then(function (resp) {
        _this.loading = false;
        _this.tableData = resp.data.data.content;
        _this.total = resp.data.data.totalElements;
      });
  },
};
</script>

<style scoped>
.el-switch.is-disabled .el-switch__core,
.el-switch.is-disabled .el-switch__label {
  cursor: pointer;
}
.biaoti {
  height: 260px;
  line-height: 220px;
  font-size: 30px;
  text-align: center;
  color: #409eff;
}

.weizhi {
  margin-left: 180px;
}
.serch {
  margin-top: 50px;
  margin-right: 20px;
  float: right;
}
.card-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  margin-left: 13%;
}

.survey-card-context {
  margin: 20px 40px 40px 20px;
}

.ziti {
  text-align: center;
  font-size: 22px;
  font-family: 楷体;
  color: black;
  width: 180px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.time {
  font-size: 15px;
  color: #999;
}

.exam {
  width: 210px;
  height: 260px;
  margin-right: 30px;
  transition: all 0.5s;
  background: -webkit-linear-gradient(
      top,
      hsla(0, 0%, 59%, 0.15),
      hsla(0, 0%, 59%, 0),
      white
    )
    no-repeat;
}

/*.exam:hover {*/
/*  margin-top: -5px;*/
/*}*/
</style>
